<template>
	<div class="content">
		<div class="head">
			<img class="bj" src="/static/wallet-bj.png" alt="">
			<div class="tx_box">
				<div class="tx">
					<img src="/static/logo.png" alt="">
					<div class="msg">
						<p class="name">减减减</p>
						<p class="text">我的ID号：71190</p>
					</div>
				</div>
				<p class="label">查看余额明细</p>
			</div>
		</div>
		<div class="balance">
			<img src="/static/wallet-icon1.png" alt="">
			<div>
				<p class="title">账户余额</p>
				<p class="price">
					<span>¥</span>0.00
				</p>
			</div>
		</div>
		<div class="reflect_box">
			<div class="title_box">
				<p class="title">提现明细</p>
				<img src="/static/closeMsg.png" alt="">
			</div>
			<!-- <scroll-view class="list_box" scroll-y :style="{height: isIphoneXnum?'calc(60vh)':'calc(40vh)'}">
				<div class="list">
					<div class="left">
						<p class="title">提现</p>
						<p class="time">2024-12-04 14:32:10</p>
					</div>
					<p class="price">-50.00</p>
				</div>
				
			</scroll-view> -->
			<div class="no_data">
				<img src="/static/no-data.png" alt="">
				<p>暂无相关提现明细哦～</p>
			</div>
		</div>

		<div class="anniu_box">
			<div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
				<p @click="toRecharge">充值</p>
				<p>提现</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneXnum:0
			}
		},
		methods: {
			// 跳转充值
			toRecharge(){
				uni.navigateTo({
					url: '/pages/wallet/recharge/index'
				});
			}
		},
		onShow(){
			uni.getSystemInfo({
				success: (res) => {
					console.log("手机信息res" + res.model);
					let modelmes = res.model;
					if (
						modelmes.search("iPhone 16") != -1 ||
						modelmes.search("iPhone 15") != -1 ||
						modelmes.search("iPhone 14") != -1 ||
						modelmes.search("iPhone 13") != -1 ||
						modelmes.search("iPhone 12") != -1 ||
						modelmes.search("iPhone 11") != -1 ||
						modelmes.search("iPhone X") != -1 ||
						modelmes.search("iPhone XR") != -1 ||
						modelmes.search("iPhone XS") != -1
					) {
						this.isIphoneXnum = 25;
					} else {
						this.isIphoneXnum = 0;
					}
				},
			});
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #f7f7f7;
		.head{
			position: relative;
			.bj{
				width: 100%;
				height: 330rpx;
				position: absolute;
				top:0;
			}
			.tx_box{
				position: relative;
				margin:0 30rpx 0 30rpx;
				top:56rpx;
				display: flex;
				justify-content: space-between;
				.tx{
					display: flex;
					img{
						width: 112rpx;
						height: 112rpx;
						border-radius: 50%;
					}
					.msg{
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						color:#fff;
						margin-left:22rpx;
						.name{
							font-size: 40rpx;
							font-weight: 500;
						}
						.text{
							font-size:26rpx;
						}
					}
				}
				.label{
					padding:0 14rpx;
					height: 42rpx;
					line-height: 42rpx;
					background: rgba(216, 216, 216, 0.15);
					border-radius: 100rpx;
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}
		.balance{
			position: relative;
			height: 192rpx;
			border-radius: 12rpx;
			padding:0 30rpx;
			background: #fff;
			border-radius: 12rpx;
			background: #FFFFFF;
			margin:116rpx 30rpx 0 30rpx;
			box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.05);
			img{
				position: absolute;
				right: 0;
				top:0;
				width: 280rpx;
				height: 192rpx;
			}
			div{
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.title{
					font-size:26rpx;
					color: #333333;
					margin:10rpx 0;
				}
				.price{
					font-size: 80rpx;
					font-weight: 500;
					color: #23AC39;
					span{
						font-size:26rpx;
						margin-right:10rpx;
					}
				}
			}
		}
		.reflect_box{
			margin:42rpx 30rpx 0 30rpx;
			.title_box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				img{
					width: 32rpx;
					height: 28rpx;
				}
			}
			.list_box{
				margin-top:20rpx;
			}
			.list{
				padding:26rpx;
				background: #fff;
				border-radius: 8rpx;
				margin-bottom:20rpx;
				display: flex;
				justify-content: space-between;
				.title{
					font-size:30rpx;
					color: #666666;
					margin-bottom:6rpx;
				}
				.time{
					font-size:24rpx;
					color:#999;
				}
				.price{
					font-size: 30rpx;
					font-weight: 500;
					color: #3B74F5;
				}
			}
			.no_data{
				text-align: center;
				margin-top:100rpx;
				img{
					width: 320rpx;
					height: 320rpx;
				}
				p{
					font-size: 24rpx;
					color: #999999;
					margin-top:-40rpx;
				}
			}
		}

		.anniu_box{
			width: 100%;
			.box{
				width: 92%;
				height: 150rpx;
				line-height: 150rpx;
				position: fixed;
				bottom:0;
				left: 0;
				padding:0 30rpx;
				z-index: 100;
				display: flex;
				justify-content: space-between;
				p{
					width: 46%;
					height: 96rpx;
					line-height: 96rpx;
					background-color: #23AC39;
					border:1px solid transparent;
					border-radius: 100rpx;
					text-align: center;
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
					&:last-child{
						background: none;
						border-color: #23AC39;
						color:#23AC39;
					}
				}
			}
		}
	}
</style>
